<template>
    <div class="trade-top-kline">
        <div class="header-box">
            <div class="more-stock-btn">
                <div class="icon" style="--icon: url(/icon/three_line.svg)" @click="marketLeftSelectorPage.open"></div>
            </div>
            <div class="symbol">{{ stock_detail_data.symbol }}</div>
            <div class="change" :style="`color: ${ parseFloat(stock_detail_data.change) >= 0 ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">{{ stock_detail_data.change }}</div>
            <div class="watch-btn">
                <div class="icon" :style="`--icon: url(/icon/show/nowatch.svg); opacity: ${ stock_detail_data.is_watch ? 0 : 1 }`"></div>
                <div class="icon" :style="`--icon: url(/icon/show/watch.svg); opacity: ${ stock_detail_data.is_watch ? 1 : 0 }`"></div>
            </div>
        </div>
        <Original></Original>
    </div>
</template>

<script setup>
import Original from '@/components/pageunit/kline/Original.vue';
import { stock_detail_data, marketLeftSelectorPage } from '@/service/market';
</script>

<style scoped lang="less">
.trade-top-kline {
    width: 100%;

    .header-box {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 3vw;
        padding: 2vw;
        border-radius: 2vw;
        box-shadow: 0 0 3vw rgba(0, 0, 0, 0.1);
        background-color: #fff;

        .more-stock-btn {
            --size: 5vw;

            .icon {
                --w: var(--size);
                --h: var(--size);
            }
        }

        .symbol {
            font-size: 4vw;
            font-weight: 500;
        }

        .change {
            font-size: 3vw;
        }

        .watch-btn {
            --size: 3.5vw;
            display: flex;
            justify-content: center;
            align-items: center;

            .icon {
                --w: var(--size);
                --h: var(--size);
            }
        }
    }
}
</style>